<template>
  <div class="container">
    <div class="bg-white padding-box">
      用户分析
    </div>
    <div class="bg-white padding-box">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item name="1">
          <template class="title" slot="title">
            昨日核心指标
          </template>
          <div>
            <avue-data-tabs :option="option"></avue-data-tabs>
          </div>
        </el-collapse-item>
        <el-collapse-item title="7日核心指标" name="2">
          <div>
            <avue-data-tabs :option="option2"></avue-data-tabs>
          </div>
        </el-collapse-item>
        <el-collapse-item title="15日核心指标" name="3">
          <div>
            <avue-data-tabs :option="option3"></avue-data-tabs>
          </div>
        </el-collapse-item>
        <el-collapse-item title="30日核心指标" name="4">
          <div id="main">

          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import { fetchTabs, fetchChart } from '@/api/shanghuiManager'
import * as echarts from 'echarts';
export default {
  name: 'shUserAnalysis',
    data() {
        return {
          activeNames: ['1', '4'],
          option: {
          data: [
            {
              click: function (item) {
                // alert(JSON.stringify(item));
              },
              title: '新注册用户',
              count: '-',
              color: 'rgb(27, 201, 142)',
            },
            {
              click: function (item) {
                // alert(JSON.stringify(item));
              },
              title: '累计注册',
              count: '-',
              color: '#FF7E00',
            }
          ]
        },
        option2: {
          data: [
            {
              click: function (item) {
                // alert(JSON.stringify(item));
              },
              title: '新注册用户',
              count: '-',
              color: 'rgb(27, 201, 142)',
            },
            {
              click: function (item) {
                // alert(JSON.stringify(item));
              },
              title: '累计注册',
              count: '-',
              color: '#FF7E00',
            }
          ]
        },
        option3: {
          data: [
            {
              click: function (item) {
                // alert(JSON.stringify(item));
              },
              title: '新注册用户',
              count: '-',
              color: 'rgb(27, 201, 142)',
            },
            {
              click: function (item) {
                // alert(JSON.stringify(item));
              },
              title: '累计注册',
              count: '-',
              color: '#FF7E00',
            }
          ]
        },
      }
    },
    mounted () {
      history.pushState(null, null, document.URL);
      window.addEventListener('popstate', function () {
          history.pushState(null, null, document.URL);
      });
      fetchTabs({type: 1}).then(res => {
        // console.log(res)
        if (res.status === 200) {
          const { data } = res.data
          this.option.data[0].count = data.registered
          this.option.data[1].count = data.cumulative
        }
      })
      fetchTabs({type: 2}).then(res => {
        // console.log(res)
        if (res.status === 200) {
          const { data } = res.data
          this.option2.data[0].count = data.registered
          this.option2.data[1].count = data.cumulative
        }
      })
      fetchTabs({type: 3}).then(res => {
        // console.log(res)
        if (res.status === 200) {
          const { data } = res.data
          this.option3.data[0].count = data.registered
          this.option3.data[1].count = data.cumulative
        }
      })
      fetchChart().then(res => {
        console.log(res, '11')
        if (res.status == 200) {
          const { data } = res.data
          let timeArr = []
          let dataArr = []
          let dataArr2 = []
          for (let i = 0; i < data.length; i++) {
            timeArr.push(data[i].time)
            dataArr.push(data[i].registered)
            dataArr2.push(data[i].cumulative)
          }
          this.setChart(timeArr, dataArr, dataArr2)
        }
      })
    },
    methods: {
      handleChange(val) {
        console.log(val);
      },
      setChart(timeArr, dataArr, dataArr2) {
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['新注册用户', '累计注册']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: timeArr
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '新注册用户',
                    type: 'line',
                    data: dataArr
                },
                {
                    name: '累计注册',
                    type: 'line',
                    data: dataArr2
                },
            ]
        };

        option && myChart.setOption(option);
      }
    }
  }
</script>

<style scoped>
.container {
  padding: 0 10px;
}
.padding-box {
  padding: 20px 10px;
}
#main {
  height: 300px;
}
</style>